<template>
	<view>
		<view class="body">
			<view class="header-title">{{status === 'one'?'新用户注册，请输入手机号码':status ==='two'?'请输入6位验证码':status ==='success'?'恭喜您，注册成功':'请您设置密码'}}</view>
			<view class="header-title2" v-if="status === 'two'">验证码已发送至尾号****的手机</view>
			<view class="header-title2" v-if="status === 'three'">密码为6-15位数字/字母</view>
			<view class="header-title2" v-if="status === 'success'">请您牢记您的用户名，并妥善保管您的密码！</view>
			<!-- 发送手机验证码 -->
			<template v-if="status ==='one'">
				<view class="login-input-box">
					<view class="phone u-f-ajc">+86<u-icon name="arrow-right"></u-icon></view>
					<input type="number" class="phone-input" @input="mobileInput" placeholder="请输入您的手机号" placeholder-style='color:#c0c4cc'/>
				</view>
				<button class="user-set-btn" :class="{'user-set-btn-disable':disabled}"
				type="primary" @click="sendCode" :disabled="disabled" :loading="loading">发送验证码</button>
				<u-modal v-model="captchaShowMsg" @confirm="confirmToLogin" :content="captchaContentMsg" :show-title="false" :show-cancel-button="true" :cancel-text="cancelText" :confirm-text="confirmText" :content-style="modalstyleObj" :cancel-style="modalstyleObj" :confirm-style="{color: '#5880FF',fontSize:'30upx',fontWeight:'700'}"></u-modal>
			</template>
			<!-- 填写收到的验证码 -->
			<template v-else-if="status === 'two'">
				<view class="code-input-box">
					<u-message-input mode="bottomLine" :maxlength="6" :focus="true" @change="getVarCode"></u-message-input>
				</view>
				<button class="user-set-btn" :class="{'user-set-btn-disable':codeDisabled}"
				type="primary" @click="confirmBtn" :disabled="codeDisabled" :loading="loading">确定</button>
			    <view class="verification-code u-f-ajc"><text class="code-title" v-if="codetime"><text class="time-style">{{codetime+'S'}}</text>后重新发送验证码</text><text v-else class="time-style" @tap="sendCode">重新发送</text></view>
			</template>
			<!-- 设置密码 -->
			<template v-else-if="status === 'three'">
				<view class="login-input-box">
					<input :password="passwordShow" @input="passwordInput" placeholder="请输入密码" placeholder-style='color:#c0c4cc'/>
					<view class="eye-pwd u-f-ajc" @click="passwordShowEvent">
						<view class="u-f-ajc"><u-icon :name="passwordShow?'eye-fill':'eye-off'"></u-icon></view>
					</view>
				</view>
				<view class="login-input-box">
					<input :password="againPasswordShow" @input="againPasswordInput" placeholder="请再次输入密码" placeholder-style='color:#c0c4cc' @blur="onPwd"/>
					<view class="eye-pwd u-f-ajc" @click="againPasswordShowEvent">
						<view class="u-f-ajc"><u-icon :name="againPasswordShow?'eye-fill':'eye-off'"></u-icon></view>
					</view>
				</view>
				<view class="login-input-box">
					<input type="text" @input="factoryNameInput" placeholder="请输入加工厂名称" placeholder-style='color:#c0c4cc'/>
				</view>
				<view class="login-input-box">
					<input type="text" @input="sfactoryNoInput" placeholder="请输入共享工厂编号" placeholder-style='color:#c0c4cc'/>
				</view>
				<button class="user-set-btn" :class="{'user-set-btn-disable':pwdDisabled}"
				type="primary" @click="pwdConfirmBtn" :disabled="pwdDisabled" :loading="loading">确定</button>
				<view class="agreement-checked u-f-ajc"><u-checkbox v-model="checked" shape="circle"></u-checkbox><text class="agreeOrNot">我已满18岁并同意接受</text><text class="agreement-text" @click="toUserAggerement">《用户开户协议》</text></view>
			</template>
			<!-- 注册成功 -->
			<template v-else>
				<view class="username u-f-ajc">您的用户名：{{userName}}</view>
				<button class="user-set-btn"
				type="primary" @click="backLoginBtn">返回登录</button>
			</template>
	       </view>
		</view>
</template>

<script>
	import md5 from '../../common/md5.js';
	export default {
		data() {
			return {
				status:'one',//one发送手机验证码;two填写收到的验证码;three设置密码;success注册成功
				captchaShowMsg:false,
				loading:false,
				disabled:true,
				codeDisabled:true,
				pwdDisabled:true,
				passwordShow:true,
				againPasswordShow:true,
				sfactoryNo:"",
				factoryName:"",
				mobile:'',
				againpassword:'',
				captcha:'',
				password:'',
				checked:false,
				codetime:0,
				userName:'',//注册成功后的用户名回显
				captchaContentMsg:'',
				cancelText:'不，谢谢',
				confirmText:'去登录',
				modalstyleObj:{color: '#333333',fontSize:'30upx',fontWeight:'700'}
			}
		},
		onLoad() {
			uni.hideHomeButton()		
		},
		watch:{
			captcha(val){
				this.OnCodeChange();
			},
		},
		methods: {
			//显示密码或者隐藏密码
			  passwordShowEvent() {
				  this.passwordShow = !this.passwordShow
			  },
			  //显示密码或者隐藏密码
			    againPasswordShowEvent() {
			  	  this.againPasswordShow = !this.againPasswordShow
			    },
			// 验证手机号码
			isPhone(){
				let mPattern = /^1[345678]\d{9}$/; 
				return mPattern.test(this.mobile);
			},
			//监听输入的手机号
			mobileInput(event){
				this.mobile = event.detail.value
				this.OnBtnChange();
			},
			//监听输入的密码
			passwordInput(event){
				this.password = event.detail.value
				this.OnSetPwdChange();
			},
			//监听输入的确认密码
			againPasswordInput(event){
				this.againpassword = event.detail.value
				this.OnSetPwdChange();
			},
			//监听输入的加工厂名称
			factoryNameInput(event){
				this.factoryName = event.detail.value
				this.OnSetPwdChange();
			},
			//监听输入的共享工厂编号
			sfactoryNoInput(event){
				this.sfactoryNo = event.detail.value
				this.OnSetPwdChange();
			},
			// 发送手机验证码改变按钮状态
			OnBtnChange(){
				if(this.mobile){
					this.disabled=false; return;
				}
				this.disabled=true;
			},
			// 监听输入验证码改变按钮状态
			OnCodeChange(){
				if(this.captcha.length === 6){
					this.codeDisabled=false; return;
				}
				this.codeDisabled=true;
			},
			// 监听设置密码改变按钮状态
			OnSetPwdChange(){
				if(this.password && this.againpassword && this.factoryName && this.sfactoryNo){
					this.pwdDisabled=false; return;
				}
				this.pwdDisabled=true;
			},
			//监听两次密码是否一致
			onPwd(){
				if(this.password !== this.againpassword){
					uni.showToast({ title: '两次输入密码不一致！', icon:"none" });
					return;
				}
			},
			//发送验证码
			async sendCode(){
				uni.removeStorageSync('token');
				// 验证手机号合法性
				if(!this.isPhone()){
					return uni.showToast({ title: '请输入正确的手机号码', icon:"none" });
				}
				let sendParams = {
					mobile: this.mobile,
					type: '2'
				};
				this.$store.dispatch('sendCaptcha', sendParams).then(res => {
						if (res.data.errorCode === 0) {
							uni.showToast({ title: '验证码发送成功，请注意查收', icon: 'none' });
							this.status = 'two'
						    if(this.codetime > 0)return;
						    // 发送成功，开启倒计时
						    this.codetime=60;
						    let timer=setInterval(()=>{
						    	this.codetime--;
						    	if(this.codetime < 1){
						    		clearInterval(timer);
						    		this.codetime=0;
						    	}
						    },1000);
						}
					}).catch(err => {
						uni.hideToast();
						this.captchaShowMsg = true
						this.captchaContentMsg = err.message+'是否登录？'
					});
			},
			//确认去登录
			confirmToLogin(){
				uni.navigateTo({
				    url: '../login/login'
				});
			},
			//用户协议
			toUserAggerement(){
				uni.navigateTo({
				    url: '/pages/userAggrement/userAggrement'
				});
			},
			getVarCode(e){
				this.captcha = e
			},
			//验证码确定
			confirmBtn(){
				this.status = 'three'
			},
			//设置密码确认
			pwdConfirmBtn(){
				if(!this.checked){
					uni.showToast({ title: '请勾选用户协议！', icon:"none" });
					return;
				}
				if(this.password !== this.againpassword){
					uni.showToast({ title: '两次输入密码不一致！', icon:"none" });
					return;
				}
				let registerParams={
					sfactoryNo:this.sfactoryNo,
					factoryName:this.factoryName,
					mobile:this.mobile,
					captcha:this.captcha,
					password:md5.hex_md5(this.password),
				}
				this.$store.dispatch('registerFactory',registerParams).then(res=>{
					if(res.data.errorCode === 0){
						this.status='success'
						this.userName = res.data.data.username
					}
				})
				
			},
			//返回登录
			backLoginBtn(){
				uni.setClipboardData({
				    data: this.userName,
				    success: function () {
						uni.hideToast();
				    }
				});
				uni.navigateTo({
				    url: '../login/login'
				});
			}
		}
	}
</script>

<style lang="scss">
page {
	background-color: #fff;
}
phone-code-extend{
	position: absolute;
	top: 0;
	height: 100%;
	z-index: 100;
}
font-color{ color: #5880FF; }
.body{
	padding: 0 30upx!important;
	.header-title{
	  margin-top: 40upx;
	  font-size: 50upx;
	  font-weight: 700;
	  line-height: 130upx;
	}
	.header-title2{
		color: #999999;
		font-size: 32upx;
	}
	.code-input-box{
		margin: 80upx 0;
	}
	.login-input-box{
		position: relative;
		font-size: 30upx;
		border-bottom: 1upx solid #F4F4F4;
		margin: 80upx 0;
		input {
			height: 2.2rem;
			font-size: 34upx !important;
		}
		.phone-input{
			padding-left: 100upx;
		}
		.eye-pwd{
			@extend phone-code-extend;
			width: 60upx;
			right: 0;
			z-index: 99999;
		}
		.phone{
			@extend phone-code-extend;
			@extend font-color;
			width:100upx;
			left: 0;
			font-weight: bold;
		}
	}
	.verification-code{
		padding: 40upx 0;
		font-size: 32upx;
		.code-title{
			color: #999999;
		}
		.time-style{
			@extend font-color
		}
	}
	.agreement-checked{
		padding: 40upx 0;
		font-size: 26rpx;
		/deep/.u-checkbox__label{
			margin-left: 0rpx!important;
			margin-right: 10rpx!important;
		}
		.agreeOrNot{
			color: #999999;
		}
		.agreement-text{
			@extend font-color
		}
	}
	.username{
		justify-content: flex-start;
		margin: 66px 0;
		font-size: 34upx;
		font-weight: 700;
		color: #cb100f;
	}
}
</style>